<!--
 * @description  : 市管-日计划制定-添加任务池任务列表
 * @descriptionDetail: 市管-日计划制定-添加任务池任务列表
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-09-02 14:57:44
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
      <view class="nav-right-icon">
        <view @tap="handlerSure">
          确定
        </view>
      </view>
    </theme-navbar>
    <!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
    <view>
      <u-search
        class="search-space"
        shape="round"
        :clearabled="true"
        :showAction="true"
        actionText="确定"
        :animation="true"
        placeholder="请输入企业字号、许可证号、地址"
        v-model="searchData.keyWord"
        @custom="handlerSearch"
      ></u-search>
      <u-dropdown class="u-p-r-20" ref="searchDropDown" @open="handlerOpen" @close="handlerClose">
        <u-dropdown-item :title="curOrgName" :options="[]" v-model="searchData.orgUuid" @change="handlerChangeItem"></u-dropdown-item>
        <u-dropdown-item title="任务主体">
          <view class="slot-ts">
            <u-cell-group :border="false">
              <u-cell-item :title="ix.bcbName" :arrow="false" v-for="ix in licOptions" :key="ix.bcbId" @click="selectTaskSubject(ix)">
                <u-icon v-if="ix.checked" slot="right-icon" size="40" :color="$theme.u_type_primary" name="checkbox-mark"></u-icon>
              </u-cell-item>
            </u-cell-group>
          </view>
        </u-dropdown-item>
        <u-dropdown-item title="任务来源" :options="taskSourceOptions" v-model="searchData.taskSource" @change="handlerChangeItem"></u-dropdown-item>
        <u-dropdown-item title="年检查次数">
          <view class="slot-content">
            <view class="item-box">
              <u-input type="number" placeholder="请输入" :border="true" v-model="searchData.checkCountStart"></u-input>
              <text class="txt-sty">
                -
              </text>
              <u-input type="number" placeholder="请输入" :border="true" v-model="searchData.checkCountEnd"></u-input>
            </view>
            <u-button type="primary" @click="handlerCount">
              确定
            </u-button>
          </view>
        </u-dropdown-item>
      </u-dropdown>
      <u-gap class="u-gap-sty" :height="$theme.cm_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
    </view>
    <view class="content u-page u-p-t-30">
      <mescroll-list
        :i="0"
        :index="0"
        :height="getListViewHeight()"
        :load-data="loadData"
        :initLoad="false"
        ref="mescrollItem0"
      >
        <view slot-scope="d">
          <u-row style="border-bottom: 1px solid #e5e5e5; padding: 5px 0px;" @tap="handlerSelectItem(d.data)">
            <u-col span="10">
              <client-item :client="d.data"></client-item>
            </u-col>
            <u-col span="2" style="text-align:right;">
              <u-icon
                name="checkbox-mark"
                :color="$theme.u_type_primary"
                size="38"
                style="margin-right: 10px;"
                v-if="selectedUids.includes(d.data.retailerUuid)"
              ></u-icon>
            </u-col>
          </u-row>
        </view>
      </mescroll-list>
    </view>
    <!-- </view> -->
    <!-- 组织机构选择 -->
    <u-popup mode="bottom" height="80%" v-model="orgSelectShow" @close="handlerCloseOrg">
      <org-select :parentUuid="parentUuid" :cleanParentOrg="true" :isHybrid="true" limitNodeType="all" treeType="zm-all" @choose="handlerChooseOrg"></org-select>
    </u-popup>
  </view>
</template>

<script>
	import MescrollList from "@/components/mescroll_list.vue";
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import OrgSelect from "@/components/org-select.vue"
	import checkService from "@/service/check/check.service"
	import {
		dateUtils,
	} from "@/common/util"
	import ClientItem from './components/client-item.vue';
	import {
		M_TASK_SOURCE,
	} from "@/service/check/mapping/enum.js";
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			ClientItem,
			OrgSelect,
			MescrollList,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				user: this.$store.state.userInfo,
				M_TASK_SOURCE,
				keyword: "",
				orgSelectShow: false,
				selectedUids: [], // 选中项的ids
				selectedItems: [], // 选中项
				searchData: { // 查询参数
					keyWord: "", // 模糊搜索关键字
					orgUuid: "",
					taskType: "",
					checkDate: "",
					taskSubject: "01",
					taskSubjectItem: '',
					taskStatus: "01", // 未分配
				},
				licOptions: [],
				planList: [],
				newList: [],
				taskSourceOptions: [],
				parentUuid: "",
				curOrgName: "组织机构",
        fContent: [{
          iconPath: require('@/static/confirm.png'),
          selectedIconPath: require('@/static/confirm.png'),
          text: '确定',
          active: false,
        }]
			};
		},
		onLoad(opt) {
			this.searchData.taskType = opt.taskType;
			// this.searchData.checkDate = opt.checkDate;
			this.searchData.orgUuid = this.user.user.depart.orgUuid; // this.curUser.docOrgUuid;
			this.planList = this.getRouteParam();
			this.parentUuid = this.user.user.depart.orgUuid;
			this.curOrgName = this.user.user.depart.orgName;
		},
		created() {
			let mtsArr = this.$store.state.dicts['M_TASK_SUBJECT'];
			let mtsiArr = this.$store.state.dicts['M_TASK_SUBJECT_ITEM'];
			mtsArr.forEach(ipt => {
				this.licOptions.push({
					bcbCode: ipt.bcbCode,
					bcbName: ipt.bcbName,
					bcbId: ipt.bcbId,
					checked: this.searchData.taskSubject == ipt.bcbCode && this.searchData.taskSubjectItem == '',
					ext: ipt,
				});
				let subArr = mtsiArr.filter(ix => {
					return ix.parentBcbCode == ipt.bcbCode;
				});
				subArr.forEach(iop => {
					this.licOptions.push({
						bcbCode: iop.bcbCode,
						bcbName: `\u00A0\u00A0\u00A0\u00A0${iop.bcbName}`,
						bcbId: iop.bcbId,
						checked: this.searchData.taskSubjectItem == iop.bcbCode,
						parentBcbCode: iop.parentBcbCode,
						parentBctPhName: iop.parentBctPhName,
						ext: iop,
					});
				});
			});

			let list = this.$store.state.dicts['M_TASK_SOURCE'];
			console.log(list);
			this.taskSourceOptions = list.filter((item) => {
				return item.value != M_TASK_SOURCE.RANOM_TASK;
			});
			this.taskSourceOptions = [{
				bcbCode: "",
				bcbName: "全部",
				value: "",
				label: "全部",
			}, ...this.taskSourceOptions, ];
		},
		methods: {
			setRightBtns() {
				// 设置右侧标题
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("确定", () => {
					this.handlerSure();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.handlerSure();
				}
			},
			getListViewHeight() {
				let p = (this.$u.sys().windowHeight - 44 - uni.upx2px(90) - this.$u.sys().statusBarHeight) + "px";
				// #ifdef H5-DINGDING || H5-WECHAT
				p = (this.$u.sys().windowHeight - uni.upx2px(90) - this.$u.sys().statusBarHeight) + "px";
				// #endif
				return p;
			},
			selectTaskSubject(ix) {
				for (let i = 0; i < this.licOptions.length; i++) {
					if (this.licOptions[i].bcbId == ix.bcbId) {
						this.licOptions[i].checked = !this.licOptions[i].checked;
						if (ix.parentBcbCode) {
							this.searchData.taskSubject = ix.parentBcbCode;
							this.searchData.taskSubjectItem = ix.bcbCode;
						} else {
							this.searchData.taskSubject = ix.bcbCode;
							this.searchData.taskSubjectItem = "";
						}
					} else {
						this.licOptions[i].checked = false;
					}
				}
				this.$refs.searchDropDown.close();
				this.handlerSearch();
			},
			handlerSearch() {
				// this.$refs['mescrollItem0'].refresh();
				let mescroll = this.getMescroll(0);
				mescroll && mescroll.triggerDownScroll();
			},
			// 选中
			handlerSelectItem(item) {
				if (this.selectedUids.includes(item.retailerUuid)) {
					this.selectedItems = this.selectedItems.filter(it => it.retailerUuid != item.retailerUuid);
				} else {
					this.selectedItems.push(item);
				}
				this.selectedUids = [];
				this.selectedItems.forEach(it => this.selectedUids.push(it.retailerUuid));
			},
			handlerOpen(idx) {
				// 组织机构 0
				idx == 0 && (this.orgSelectShow = true);
				this.$refs.searchDropDown.highlight();
			},
			handlerClose(idx) {
				this.orgSelectShow = false;
				this.$refs.searchDropDown.highlight(idx);
			},
			handlerChooseOrg(orgs) {
				if (orgs.length == 0) {
					this.$u.toast("请选择组织机构");
					return;
				}
				this.searchData.orgUuid = orgs[0].id;
				this.curOrgName = orgs[0].name;
				// this.orgSelectShow = false;
				this.$refs.searchDropDown.close();
				this.handlerSearch();
			},
			handlerCloseOrg() {
				this.$refs.searchDropDown.close();
			},
			// 选择搜索条件项
			handlerChangeItem() {
				console.log(this.searchData);
				this.handlerSearch();
			},
			// 填写年检查次数
			handlerCount() {
				this.$refs.searchDropDown.close();
				this.handlerSearch();
			},
			// 列表查询数据
			loadData(page) {
				// 调用后台接口查询数据：分页参数page.size, page.num
				return checkService.findPlnInTaskPoolListPage({
					page: page.num,
					limit: page.size,
					...this.searchData,
				});
			},
			// 确定
			handlerSure() {
				let self = this
				if (this.selectedItems.length == 0) {
					this.$u.toast("请选择任务");
					return;
				}
				this.planList.forEach(item => {
					self.newList.push(item.retailerUuid)
				})
				let idList = self.selectedItems.filter(r => {
					return self.newList.includes(r.retailerUuid)
				})
				if (idList.length > 0) {
					this.$u.hideLoading();
					this.selectedItems.filter(item => {
						if (item.retailerUuid == idList[0].retailerUuid) {
							this.$u.toast(`【${item.companyName}】已存在`);
						}
					})
					return
				}
				this.backPrev({
					paramKey: 'keySupervisionTask',
					param: this.selectedItems,
				});
				this.selectedUids = this.selectedItems = [];
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 0;
	}

	.slot-content {
		background-color: #FFFFFF;
		padding: 32rpx 32rpx;

		.item-box {
			margin-bottom: 32rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
	}

	/deep/.u-dropdown__menu .u-dropdown__menu__item:first-child .u-flex {
		overflow: hidden;
		height: 100%;
	}

	.slot-ts {
		background-color: #FFFFFF;

	}

	.txt-sty {
		line-height: 60rpx;
		padding: 0 10px;
	}

	.search-space {
		padding: $cm-search-padding-row $cm-search-padding-column;
		padding-bottom: 6px;
	}

	.u-gap-sty {
		position: relative;
	}

	/deep/.u-dropdown__menu__item__text {
		text-align: center;
	}
</style>
